﻿
#WelcomeWord {
    width: 180px;
    height: 80px;
    margin-left: 50px;
    text-align: center;
    margin-top: 20px;
    color: blue;
    font-size: large;
    border: thin solid #FF0000;
    border-radius: 1em;
    border-color: red;
    border-width: 8px;
}


#TransformDiv {
    width: 180px;
    height: 80px;
    margin-left: 50px;
    text-align: center;
    margin-top: 100px;
    transform: rotate(30deg);
    -ms-transform: rotate(30deg); /* IE 9 */
    -webkit-transform: rotate(30deg); /* Safari and Chrome */
}

#Body {
    background-image: url(../images/grey_wash_wall.png);
    background-repeat: inherit;
    background-position-x: center;
    background-position-y: top;
    /* for Chrome */
    -webkit-animation-duration: 3s;
    -webkit-animation-delay: 1s;
    /*-webkit-animation-iteration-count:infinite;*/
    /* for FF */
    -moz-animation-duration: 3s;
    -moz-animation-delay: 0s;
    /*-moz-animation-iteration-count:infinite;*/
    font-family: 'PoetsenOne';
}

@font-face {
    font-family: PoetsenOne;
    src: url("PoetsenOne-Regular.TTF");
}

.i2Style {
    font: bold 24px "Comic Sans MS", cursive, sans-serif;
    font-style: normal;
    color: #000000;
    background: #e3e3e3;
    border: 1px solid #bbb;
    text-shadow: 0px 1px 0px #fff;
    box-shadow: 0px 7px 1px #000000;
    -moz-box-shadow: 0px 7px 1px #000000;
    -webkit-box-shadow: 0px 7px 1px #000000;
    border-radius: 10px 10px 10px 10px;
    -moz-border-radius: 10px 10px 10px 10px;
    -webkit-border-radius: 10px 10px 10px 10px;
    width: 75px;
    padding: 15px 35px;
    cursor: pointer;
    margin: 0 auto;
}

    .i2Style:active {
        cursor: pointer;
        position: relative;
        top: 2px;
    }

/*For PageTop*/
ul[data-liffect="pageTop"] li {
    opacity: 0;
    position: relative;
    -webkit-animation: pageTop 1400ms ease both;
    -webkit-animation-play-state: paused;
    -webkit-transform-origin: 50% 0%;
    -moz-animation: pageTop 600ms ease both;
    -moz-animation-play-state: paused;
    -moz-transform-origin: 50% 0%;
    -o-animation: pageTop 600ms ease both;
    -o-animation-play-state: paused;
    -o-transform-origin: 50% 0%;
    animation: pageTop 600ms ease both;
    animation-play-state: paused;
    transform-origin: 50% 0%;
    /*width: 19.5%;
    height: 19.5%;*/
    float: left;
    margin: 0 2px 0 2px;
    list-style: none;
    color: #000;
    background-color: #eee;
    overflow: hidden;
}

ul[data-liffect="pageTop"].play li {
    -webkit-animation-play-state: running;
    -moz-animation-play-state: running;
    -o-animation-play-state: running;
    animation-play-state: running;
}

@-webkit-keyframes pageTop {
    0% {
        opacity: 0;
        -webkit-transform: perspective(400px) rotateX(90deg);
    }

    100% {
        opacity: 1;
        -webkit-transform: perspective(400px) rotateX(0deg);
    }
}

@-moz-keyframes pageTop {
    0% {
        opacity: 0;
        -moz-transform: perspective(400px) rotateX(90deg);
    }

    100% {
        opacity: 1;
        -moz-transform: perspective(400px) rotateX(0deg);
    }
}

@-o-keyframes pageTop {
    0% {
        opacity: 0;
        -o-transform: perspective(400px) rotateX(90deg);
    }

    100% {
        opacity: 1;
        -o-transform: perspective(400px) rotateX(0deg);
    }
}

@keyframes pageTop {
    0% {
        opacity: 0;
        transform: perspective(400px) rotateX(90deg);
    }

    100% {
        opacity: 1;
        transform: perspective(400px) rotateX(0deg);
    }
}
